<template>
	<view class="follow-container">
		<view class="list-header">
			<text :class="{active:index===0}" @click="index=0">文章</text>
			<text :class="{active:index===1}" @click="index=1">作者</text>
		</view>
		<swiper @change="handle_change" :current="index" style="height: 100%;">
			<swiper-item>
				<ListItem v-show="article_list.length" is_search :search_list="article_list" />
				<view v-show="!article_list.length" class="no-data">
					还未收藏任何文章，赶快去收藏吧~
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" v-if="author_list.length" style="height: 100%;">
					<view :style="{'padding-bottom': '100rpx'}">
						<view class="author-item" v-for="item in author_list" :key="item._id">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="author-info">
								<text>{{item.author_name}}</text>
								<view class="author-detail">
									<text>{{item.professional}}</text>
									<view>
										<text>发帖 {{item.article_ids.length}}</text>
										<text class="fans-count">粉丝 {{item.fans_count}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="no-data" v-else>
					还未关注任何作者，赶快去关注吧~
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				article_list: [],
				author_list: []
			}
		},	// 下拉刷新
		async onPullDownRefresh() {
			await this.init_data()
			uni.stopPullDownRefresh()	// 关闭刷新动画
		},
		async onLoad() {
			this.init_data()
		},
		methods: {
			handle_change(e) {
				this.index = e.detail.current
			},
			async init_data() {
				this.article_list = await this.$http.get_collect_list({
					user_id: this.user_info._id
				})
				this.author_list = await this.$http.get_follow_list({
					user_id: this.user_info._id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.follow-container {
		height: 100%;

		.list-header {
			@include flex(center);
			padding: 20rpx 0;
			background-color: #F0F0F0;

			text {
				flex: 0 0 30%;
				text-align: center;
				font-size: 30rpx;
				padding: 8rpx 0;
				border: 1px solid $base-color;

				&:first-child {
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}

				&:last-child {
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}

				&.active {
					color: #fff;
					background-color: $base-color;
				}
			}
		}

		/deep/ .uni-scroll-view-content>uni-view {
			padding-bottom: 100rpx;
		}

		.author-item {
			@include flex(flex-start);
			padding: 20rpx;
			border-bottom: 1px solid #ddd;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.author-info {
				flex: 1;

				>text {
					font-weight: bold;
				}

				.author-detail {
					font-size: 24rpx;
					color: $secondary;
					@include flex();

					.fans-count {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
